<HTML>
<HEAD>
<meta NAME="author" CONTENT="Judit Vasko-Szedlar">
<link REL="stylesheet" TYPE="text/css" HREF="../../../marvinmanuals.css" TITLE="Style">

<TITLE>MarvinSpace demo</TITLE>
<SCRIPT type="text/javascript" LANGUAGE="JavaScript">
function selectedDrawType()
{
  if(document.DrawType.group1[0].checked == true)
  {
    document.MSpaceApplet.setProperty( "Ligand.DrawType", document.DrawType.group1[0].value );
  }
  if(document.DrawType.group1[1].checked == true)
  {
    document.MSpaceApplet.setProperty( "Ligand.DrawType", document.DrawType.group1[1].value );
  }
  if(document.DrawType.group1[2].checked == true)
  {
    document.MSpaceApplet.setProperty( "Ligand.DrawType", document.DrawType.group1[2].value );
  }
  if(document.DrawType.group1[3].checked == true)
  {
    document.MSpaceApplet.setProperty( "Ligand.DrawType", document.DrawType.group1[3].value );
  }
  if(document.DrawType.group1[4].checked == true)
  {
    document.MSpaceApplet.setProperty( "Ligand.DrawType", document.DrawType.group1[4].value );
  }
}
function showHydrogens() {
    document.MSpaceApplet.setProperty( "Ligand.Hydrogens", document.Options.hcb.checked==1 );
}
function smoothSticks() {
    document.MSpaceApplet.setProperty( "Ligand.SmoothStickStyle", document.Options.scb.checked==1 );
}
function bondOrder() {
    document.MSpaceApplet.setProperty( "Ligand.DisplayBondOrder", document.Options.bcb.checked==1 );
}
function drawRotationSphere() {
    document.MSpaceApplet.setProperty( "DrawSphere", document.Options.cb.checked==1 );
}

</SCRIPT>

</HEAD>

<BODY>

<H1>MarvinSpace</H1>

<p>In this example we use JavaScript to change some of the visualization options.</p>
<table cellspacing="0" cellpadding="5" border="0" align="center">
<tr><td>
<script language="JavaScript" src="../../../marvin.js"></script>
<script language="JavaScript">
<!--
mspace_name="MSpaceApplet";
mspace_begin(mspace_name,"../../..",400,400);
mspace_param("progressbar","true");
mspace_param("selectionpanel","false");
mspace_param("molecule","http://www.chemaxon.com/marvinspace/data/1ETS.mol");
mspace_end();
//-->
</script>
</td>

<td>
Draw types<br>
<form action="" name="DrawType">
<input type="radio" name="group1" value="Wire" onClick="selectedDrawType()"> Wire<br>
<input type="radio" name="group1" value="Ball" onClick="selectedDrawType()"> Ball<br>
<input type="radio" name="group1" value="Stick" onClick="selectedDrawType()"> Stick<br>
<input type="radio" name="group1" value="BallAndStick" checked onClick="selectedDrawType()"> Ball and Stick<br>
<input type="radio" name="group1" value="Spacefill" onClick="selectedDrawType()"> Spacefill<br>
</form>
<br>

<form action="" name="Options">
    <input type="checkbox" name="hcb" onClick="showHydrogens()"> Hydrogens<br>
    <input type="checkbox" name="scb" onClick="smoothSticks()"> Smooth sticks<br>
    <input type="checkbox" name="bcb" checked onClick="bondOrder()"> Display bond order<br>
    <input type="checkbox" name="cb" onClick="drawRotationSphere()"> Draw rotation sphere <br>
</form>
</td>
</tr>
</table>
<br>
<blockquote>
    Almost all options can be reached through the same function:
    <pre>
        setProperty(String propertyName, String propertyValue)
    </pre>
    The list of the available properties, their possible and default values can be found
    <a href="../../../help/developer/space-par.html">here</a>.<br>
    For example to change the Draw Type of the loaded molecule,
    <pre>
        setProperty("Ligand.DrawType", "Wire")
    </pre>
    should be called. Through JavaSript, we used
    <pre>
        if(document.DrawType.group1[0].checked == true)
        {
          document.MSpaceApplet.setProperty( "Ligand.DrawType", document.DrawType.group1[0].value );
        }
    </pre>


</blockquote>

<center><div class="lenia">&nbsp;</div></center>
<p>
<center>
<font size="-2" face="helvetica">

Copyright &copy; 2004-2010
<a href="http://www.chemaxon.com">ChemAxon Ltd.</a>
&nbsp;&nbsp;&nbsp;All rights reserved.
</font>
</center>

</BODY>
</HTML>


